<template>
  <div class="AMapPositionPicker">
    <a-input
      id="AMap-position-picker"
      class="AMap-position-picker"
      :placeholder="placeholder"
      v-model:value="address"
      allowClear
      @change="change"
    >
      <template #prefix>
        <SearchOutlined />
      </template>
    </a-input>
  </div>
</template>

<script>
import { SearchOutlined } from '@ant-design/icons-vue';
import { AMapPoiSearch } from '@gis/lib/components/AMap/js/AMapPoiSearch.js';

export default {
  name: 'AMapPositionPicker',
  emits: ['select'],
  components: {
    SearchOutlined,
  },
  props: {
    mapGetter: { type: Function, default: undefined },
    placeholder: { type: String, default: '输入名称，快速定位地图中心坐标' },
    icon: { type: String, default: 'search' },
    iconUrl: { type: String, default: '' },
  },
  data() {
    return {
      address: '',
    };
  },
  mounted() {
    this.map = this.mapGetter();
    this.init();
  },
  methods: {
    init() {
      this.mapPoiSearch = new AMapPoiSearch(this.map);
      this.mapPoiSearch.init('AMap-position-picker');
      // this.mapPoiSearch.onSelect = (res) => {
      //   // this.$emit('select', res);
      // };
    },
    change() {
      if (this.address === '') {
        this.mapPoiSearch.clear();
      }
    },
  },
};
</script>

<style lang="less">
.AMap-position-picker {
  width: 300px;
  margin: auto;

  &.ant-input-affix-wrapper .ant-input:not(:first-child) {
    //padding-left: 45px;
  }

  &.ant-input-affix-wrapper .ant-input {
    border: none;
    background: none;
    color: #ffffff;
    caret-color: #ffffff;
  }

  &.ant-input-affix-wrapper .ant-input:hover {
    border: none;
  }

  .ant-input-prefix:after {
    content: '';
    display: inline-block;
    width: 0;
    height: 18px;
    margin: 0 9px;
    border-right: 1px solid #5e676f;
  }
}
</style>
